<template>
	<div class="box czjz" id="windowBox">
		<div class="name-box">{{projectInfo.name}}</div>
		<p class="pro-name">
			<el-tag :type="projectInfo.hjjc?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">环境监测-{{ projectInfo.hjjc?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.wifi?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">wifi-{{ projectInfo.wifi?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.led?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">LED照明-{{ projectInfo.led?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.aiVideo?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">AI监控-{{ projectInfo.aiVideo?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.cityFM?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">城市FM-{{ projectInfo.cityFM?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.car_power?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">汽车充电桩-{{ projectInfo.car_power?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.phone_power?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">手机无线充电-{{ projectInfo.phone_power?'正常':'异常'}}</el-tag>
			<el-tag :type="projectInfo.ad?'primary':'error'" size="mini" effect="dark" style="margin-left: 5px;margin-bottom: 5px">智能广告灯箱-{{ projectInfo.ad?'正常':'异常'}}</el-tag>
		</p>
		<i class="el-icon-close close-icon" @click="close"></i>
		<!-- <el-button @click="viewPro" size="mini" type="primary" class="view-but-box">查看详情</el-button> -->
	</div>
	<!-- {{ projectInfo }} -->
</template>

<script>
	export default {
		props: {
			projectInfo: {
				type: Object
			}
		},
		methods: {
			viewPro() {
				this.$router.push({
					path: '/viewProject',
					query: {
						projectId: this.projectInfo.id,
						projectName: this.projectInfo.name
					}
				});
			},
			close() {
				this.$store.state.showWoindow = false
				var dom = document.getElementById('windowBox')
				dom.className = 'box czjz tuichu'
				setTimeout(() => {
					dom.className = 'box czjz'
					this.$emit('close');
				}, 200)
			}
		}
	};
</script>

<style scoped>
	.name-box {
		font-size: 14px;
		text-indent: .5em;
		line-height: 20px;
		border-bottom: 1px solid #fff;
		margin-bottom: 5px;
	}
	
	.box {
		width: 300px;
		padding: 5px 0 0 0;
		/* height: 190px; */
		/* padding: 40px; */
		/* background-image: url(../../../../static/home-info-bg.gif); */
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 5px;
		color: #fff;
		overflow: hidden;
		position: relative;
		animation: jinru .3s linear;
		box-shadow: 0 0 30px 20px rgba(94, 124, 255, 0.4) inset;
		background-color: rgba(94, 124, 255, 0.1);
	}

	@keyframes jinru {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}

		40% {
			transform: scale(1.2);
		}

		100% {
			opacity: 1;
			transform: scale(1);
		}
	}

	.tuichu {
		animation: tuichu .3s linear;
	}

	@keyframes tuichu {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		40% {
			transform: scale(1.2);
		}

		100% {
			opacity: 0;
			transform: scale(0.1);
		}
	}

	.pro-name {
		font-size: 13px;
	}

	.view-but-box {
		position: absolute;
		right: 40px;
		bottom: 40px;
	}

	.close-icon {
		position: absolute;
		right: 7px;
		top: 7px;
		cursor: pointer;
		transition: all .2s
	}

	.close-icon:hover {
		color: #24a6e2;
		transform: scale(1.5) rotate(180deg);
	}
</style>

<!-- 信息窗口颜色 -->

<style>
	.amap-info-content {
		background-color: rgba(0, 0, 255, 0.3);
		border-radius: 4px;
		padding: 0;
	}

	.amap-info-sharp {
		left: 53% !important;
		border-top: 8px solid rgba(0, 0, 255, 0) !important;
	}

	.bottom-center {
		position: absolute;
		left: 2px;
		bottom: -35px;
	}

	.amap-info-close {
		display: none;
		/* right: 10px !important; */
	}
</style>
